<template>
  <div class="content">
    <div class="pointer-events-none" style="position:fixed;top:0;left:0;width: 100vw;height: 100%;z-index:0;background-size: cover;  display: flex;justify-content: center;align-items: center;">
      <HelloCIC></HelloCIC>
    </div>
    <LoadingAnimation v-if="!backgroundLoaded" />
    <div v-else class="login-content">
      <div class="banner-box"></div>
      <div class="login-box">
        <h1>账号登录</h1>
        <input v-model="loginForm.accountNo" type="text" placeholder="账号">
        <input v-model="loginForm.accountPassword" type="password" placeholder="密码">
         <input v-model="loginForm.checkCode" type="text" placeholder="验证码">
        <el-tag class="check-code-tag" @click="getCode()">{{ viewCode }}</el-tag>
        <button :disabled="this.loginClick" class="login-btn" @click="this.login()">登录</button>
      </div>
    </div>
  </div>
</template>

<script>
import HelloCIC from "@/views/login/HelloCIC.vue";
import request from "@/util/request.js";
import LoadingAnimation from "@/views/login/LoadingAnimation.vue";
import backgroundImg from "@/assets/image/FirstPersonMap.0672.png"
export default {
  name: "login",
  components: {
    LoadingAnimation,
    HelloCIC
  },
  data(){
    return{
      backgroundLoaded: false,
      // 验证码
      viewCode: '',
      loginClick: false,
      // 登录信息/验证信息
      loginForm: {
        accountNo: '',
        accountPassword: '',
        checkCode:""
      },
      backgroundImg:backgroundImg
    };
  },//data
  created() {
    this.loadBackgroundImage();
    this.getCode()
  },//created
  methods: {
    loadBackgroundImage() {
      const img = new Image();
      img.onload = () => {
        this.backgroundLoaded = true;
      };
      img.src = this.backgroundImg;
    },
    //获取验证码
    getCode: function () {
      this.viewCode = '' // 验证码信息置空
      const allChar = '123456789ABCDEFGHIJKLMNPQRSTUVWXYZ'//25个英文字母+9个数字[0,33]
      const codeArray = allChar.split('')
      for (let i = 0; i < 4; i++) {
        this.viewCode = this.viewCode + codeArray[Math.floor(Math.random() * 34)]
      }
    },
    // 登录按钮
    login() {
      this.loginClick = true
      if (this.checkCode!=='') {
        if (this.loginForm.checkCode.toUpperCase() === '' || this.loginForm.checkCode.toUpperCase() !== this.viewCode) {
          this.$message.error('验证码不正确！')
          this.getCode()
          this.loginClick = false
          return
        }
        request.post("/account/login" , this.loginForm).then(res => {
          if (res.data.code === '200') {
            localStorage.setItem("user", JSON.stringify(res.data.data));
            if (res.data.data.isChangedPWD) {
              this.$router.push("/home")
            } else {
              this.$router.push("/resetPwd")
              this.$notify({
                title: "建议修改密码",
                message: "检测到为初始密码，建议您进行修改并牢记",
                duration: 0
              });
            }
            // this.$notify({
            //   title: '学业水平成绩处理说明',
            //   message: '9月10日晚22:00到22:10统一处理学业水平成绩，请勿在此期间进行综测的任何操作',
            //   duration: 0
            // });
          } else {
            this.$message.error("用户名/密码错误")
            this.getCode()
            this.loginClick = false
            return false;
          }
        })
      }
    },
  },
}
</script>

<style scoped>
.pointer-events-none {
  pointer-events: none;
}

.check-code-tag {
  margin-bottom: 20px;
  width: 200px;
  height: 36px;
  padding: 0 20px;
  border-radius: 36px;
  border: none;
  /* 消除点进去出现的提示框 */
  outline: none;
  font-size: 18px;
}
* {
  /* 初始化 设置标准 */
  margin: 0;
  padding: 0;
}

.content {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-content {
  position: relative;
  width: 700px;
  height: 500px;
  background: url("@/assets/image/FirstPersonMap.0672.png") no-repeat;
  background-size: cover;
  border-radius: 30px;
  padding: 30px;
  opacity: 0.95; /* 设置透明度为 0.7（即 70% 不透明） */
}


.banner-box {
  /* 转为块级模块 */
  display: inline-block;
  border-radius: 20px;
}

.login-box {
  width: 100%;
  height: 100%;
  /* 绝对定位 */
  position: absolute;
  top: 0;
  right: 0;
  /* background-color: aqua; */
  border-radius: 0 30px 30px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login-box>h1 {
  font-size: 36px;
  margin: 60px 0;
  color: #fff;
}

.login-box>input {
  margin-bottom: 20px;
  width: 200px;
  height: 36px;
  padding: 0 20px;
  border-radius: 36px;
  border: none;
  /* 消除点进去出现的提示框 */
  outline: none;
  font-size: 18px;
}

.login-btn {

  width: 200px;
  height: 40px;
  background-color: rgba(21, 58, 141, 0.99);
  border: none;
  border-radius: 40px;
  color: #fff;
  font-size: 18px;
}


</style>
